<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品页面</title>
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/angular.js"></script>
    <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/wapper.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/title-right.css">
    <link rel="stylesheet" href="css/content2.css">
</head>
<body ng-app="product" ng-controller="productController">
<div>
    <!--顶部导航-->
    <div class="header">
        <!--导航条1-->
        <div class="nav">
            <div class="nav-in">
                <div class="nav-in-left">
                    <ul class="address">
                        <li><a href="#">河南<span class="caret"></span></a></li>
                    </ul>
                </div>
                <div class="nav-in-right">
                    <ul>
                        <li class="hider">
                            <a href="#">请登录</a>
                            <div class="hiding hiding-1">
                                <img src="image/denglu.jpg">
                                <div><p><a>欢迎回来[请登录]</a></p></div>
                                <div>
                                    <p><a><span>我的收藏</span></a><a><span>我的订单</span></a></p>
                                    <p><a><span>我的钱包</span></a><a><span>我的优惠券</span></a></p>
                                    <p><a><span>我的唯品币</span></a><a><span>唯品精品</span></a></p>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li class="hider"  >
                            <a href="#">我的收藏<span class="caret"></span></a>
                            <div class="hiding" style="padding-left: 20px;width: 132px;">
                                <p><a href="#">收藏的品牌(0)</a></p>
                                <p><a href="#">收藏的商品(0)</a></p>
                            </div>
                        </li>
                        <li class="hider">
                            <a href="#">会员俱乐部<span class="caret"></span></a>
                            <div class="hiding" style="width:105px;padding: 0 10px 10px 12px;">
                                <p><a href="#">俱乐部首页</a></p>
                                <p><a href="#">唯品币兑换</a></p>
                                <p><a href="#">免费抽大奖</a></p>
                            </div>
                        </li>
                        <li class="hider">
                            <a href="#">客户服务<span class="caret"></span></a>
                            <div class="hiding" style="padding:0 5px 10px 10px;width: 92.3px; ">
                                <p ><a href="#">联系客服</a></p>
                                <p ><a href="#">帮助中心</a></p>
                                <p ><a href="#">会员反馈</a></p>
                                <p ><a href="#">知识产权投诉</a></p>
                            </div>
                        </li>
                        <li class="hider">
                            <a href="#" style="display: inline;padding-left: 5px"><span class="phone"></span>手机版</span></a>
                            <div class="hiding hiding-5">
                                <img src="image/2weima.jpg">
                                <p><a href="#"><b style="text-align: center;display: block">随时逛 及时抢</b></a></p>
                            </div>
                        </li>
                        <li class="hider" >
                            <a href="#">更多<span class="caret"></span></a>
                            <div class="hiding  hiding-6">
                                <div style="border-bottom: 1px dashed #cccccc">
                                    <p style="margin-top: 5px"><a href="#"><b >合作专区</b></a></p>
                                    <p style="margin-bottom:12px"> <a href="#"><span>联名卡申请</span> </a><a href="#"><span>唯品卡</span></a><a href="#"><span>支付专区</span> </a></p>
                                </div>
                                <div>
                                    <p style="margin-top: 5px"><a href="#"><b>关于我们</b></a></p>
                                    <p style="margin-bottom:12px"><a href="#"><span>sell on vip</span></a><a href="#"><span>品牌招商</span></a><a href="#"><span>官方博客</span></a></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
        <!--唯品会图标-->
        <div class="header-logo">
            <div><a href="#"><img src="image/logo-1.png"></a></div>
            <div class="logo-hide">
                <p>
                    <span class="buy-bag"></span>
                    <span><a href="#">我的购物袋</a></span>
                </p>
                <div class="num">0</div>
                <div class="logo-hide-in">
                    <p>好像还未登录！<a href="#" style="color: #f10180;">马上登录</a> 查看购物袋吧！</p>
                </div>
            </div>
            <div>|</div>
            <div>
                <a href="#"><img src="image/logo-2.png"></a>
                <a href="#"><img src="image/logo-3.png"></a>
                <a href="#"><img src="image/logo-4.png"></a>
            </div>
        </div>
    </div>
    <!--首页导航-->
    <div style="width: 100%;height: 40px;background-color:white ">
        <div class="wapper">
            <!--菜单导航-->
            <nav class="wapper-nav">
                <ul class="wapper-nav-left">
                    <li style="background-color: #bd1067;" ><a href="#">首页</a></li>
                    <li><a href="#">唯品国际</a></li>
                    <li><a href="#">母婴</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">男士</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">唯美金融</a></li>
                    <li><a href="#">旅行</a></li>
                    <li style="position: relative">
                        <a href="#">更多<span class="caret"></span></a>
                        <div class="wapper-hider" style="display: none">
                            <div class="wapper-hider-1 a">
                                <div class="shadow"></div>
                                <div><p>女装</p></div>
                            </div>
                            <div class="wapper-hider-2 a">
                                <div class="shadow"></div>
                                <div><p>鞋包</p></div>
                            </div>
                            <div class="wapper-hider-3 a">
                                <div class="shadow"></div>
                                <div><p>配饰</p></div>
                            </div>
                            <div class="wapper-hider-4 a">
                                <div class="shadow"></div>
                                <div><p>运动</p></div>
                            </div>
                            <div class="wapper-hider-5 a">
                                <div class="shadow"></div>
                                <div><p>汽车</p></div>
                            </div>
                            <div class="wapper-hider-6 a">
                                <div class="shadow"></div>
                                <div><p>爱丽奢</p></div>
                            </div>

                        </div>
                    </li>
                    <li><a href="#">预告</a></li>
                </ul>
                <ul class="wapper-nav-right">
                    <li><a href="#">
                        分类</a></li>
                    <a href="#"><div class="kinds"></div></a>
                </ul>
            </nav>
        </div>
    </div>
    <div style="width: 100%;height: 40px;background-color:white " class="wapper-1">
        <div class="wapper">
            <!--菜单导航-->
            <nav class="wapper-nav">
                <ul class="wapper-nav-left">
                    <li style="background-color: #bd1067;" ><a href="#">首页</a></li>
                    <li><a href="#">唯品国际</a></li>
                    <li><a href="#">母婴</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">男士</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">唯美金融</a></li>
                    <li><a href="#">旅行</a></li>
                    <li style="position: relative">
                        <a href="#">更多<span class="caret"></span></a>
                        <div class="wapper-hider" style="display: none">
                            <div class="wapper-hider-1 a">
                                <div class="shadow"></div>
                                <div><p>女装</p></div>
                            </div>
                            <div class="wapper-hider-2 a">
                                <div class="shadow"></div>
                                <div><p>鞋包</p></div>
                            </div>
                            <div class="wapper-hider-3 a">
                                <div class="shadow"></div>
                                <div><p>配饰</p></div>
                            </div>
                            <div class="wapper-hider-4 a">
                                <div class="shadow"></div>
                                <div><p>运动</p></div>
                            </div>
                            <div class="wapper-hider-5 a">
                                <div class="shadow"></div>
                                <div><p>汽车</p></div>
                            </div>
                            <div class="wapper-hider-6 a">
                                <div class="shadow"></div>
                                <div><p>爱丽奢</p></div>
                            </div>

                        </div>
                    </li>
                    <li><a href="#">预告</a></li>
                </ul>
                <ul class="wapper-nav-right">
                    <li><a href="#">
                        分类</a></li>
                    <a href="#"><div class="kinds"></div></a>
                </ul>
            </nav>
        </div>
    </div>

    <!--产品内容-->
    <div class=" content2" style="position: relative">
        <div class="buy1 p"><img src="image/product/befor.png"> </div>
        <div class="buy2 p"><img src="image/product/befor.png"> </div>
        <div class="buy3 p"><img src="image/product/befor.png"> </div>
        <div class="buy4 p"><img src="image/product/befor.png"> </div>
        <div class="buy5 p"><img src="image/product/befor.png"> </div>
        <div class="buy6 p"><img src="image/product/befor.png"> </div>
        <div class="buy7 p"><img src="image/product/befor.png"> </div>
        <div class="buy8 p"><img src="image/product/befor.png"> </div>
        <div class="buy9 p"><img src="image/product/befor.png"> </div>
        <div class="content2-in">
            <ul>
                <li><img src="image/product/content2-1.jpg"></li>
                <li><img src="image/product/content2-2.jpg"></li>
                <li><img src="image/product/content2-3.jpg"></li>
                <li><img src="image/product/content2-4.jpg"></li>
                <li><img src="image/product/content2-5.jpg"></li>
                <li><img src="image/product/content2-6.jpg"></li>
                <li><img src="image/product/content2-7.jpg"></li>
                <li><img src="image/product/content2-8.jpg"></li>
                <li><img src="image/product/content2-9.jpg"></li>
                <li><img src="image/product/content2-10.jpg"></li>
                <li><img src="image/product/content2-11.jpg"></li>
                <li><img src="image/product/content2-12.jpg"></li>
                <li><img src="image/product/content2-13.jpg"></li>
                <li><img src="image/product/content2-14.jpg"></li>
                <li><img src="image/product/content2-15.jpg"></li>
                <li><img src="image/product/content2-16.jpg"></li>
                <li><img src="image/product/content2-17.jpg"></li>
            </ul>
        </div>
    </div>


    <!--产品分类-->
    <div class="kinds">
        <div class="kinds-top">
            <span>奥丽嘉朵OBBLIGATO女装专场</span>
            <span class="glyphicon glyphicon-time" style="color: #f10180;"></span>
            <span class="timer"></span>
        </div>
    </div>


    <!--脚部-->
    <div class="foot">
        <div class="foot-in1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="foot-in2">
                <dl>
                    <dt>服务保障</dt>
                    <dd><a href="#">正品保证</a></dd>
                    <dd><a href="#">7天无理由放心退</a></dd>
                    <dd><a href="#">退货返运费</a></dd>
                    <dd><a href="#">7x15小时客服服务</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">导购演示</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                    <dd><a href="#">会员注册</a></dd>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">收货样品</a></dd>
                    <dd><a href="#">会员等级</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">快捷支付</a></dd>
                    <dd><a href="#">23家主流网银支付</a></dd>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">支付宝、银联等支付</a></dd>
                    <dd><a href="#">信用卡支付</a></dd>
                    <dd><a href="#">唯品钱包支付</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">全场满288元免运费</a></dd>
                    <dd><a href="#">配送范围级运费</a></dd>
                    <dd><a href="#">验货与签收</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">退货政策</a></dd>
                    <dd><a href="#">退货流程</a></dd>
                    <dd><a href="#">退货方式和时效</a></dd>
                </dl>
                <dl>
                    <dt>唯品会APP二维码</dt>
                    <dd><img src="image/footer/footer-2.png"> </dd>
                    <dd></dd>
                    <dd></dd>
                    <dd></dd>
                    <dd></dd>
                    <dd>下载唯品会移动APP</dd>
                </dl>
            </div>
            <div class="foot-in3">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">About us</a>|
                    <a href="#">Investor Relations</a>|
                    <a href="#">媒体报道</a>|
                    <a href="#">隐私条款</a>|
                    <a href="#">友情链接</a>|
                    <a href="#">唯品诚聘</a>|
                    <a href="#">365爱心基金</a>|
                    <a href="#">唯品卡</a>|
                    <a href="#">唯品地图</a>|
                    <a href="#">品牌大全</a>|
                    <a href="#">联系我们</a>
                </p>
            </div>
            <div class="foot-in4">
                <p>
                    <a>Copyright © 2008-2016 vip.com，All Rights Reserved</a>
                    <a href="#" class="foot-chang">粤ICP备08114786号</a>
                    <a href="#" class="foot-chang">ICP经营许可证：粤B2-20080329 </a>
                    <a href="#" class="foot-chang">网络文化经营许可证：粤网文〔2015〕1528-229</a>
                    <a >使用本网站即表示接受</a>
                    <a href="#" class="foot-chang">唯品会用户协议</a>
                    <a>。版权所有 </a>
                    <a href="#" class="foot-chang">广州唯品会信息科技有限公司</a>
                </p>
            </div>
            <div class="foot-in5">
                <div>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!--右边菜单-->
    <div class="title-right">
        <div class="title-right-top">
            <ul>
                <li>
                    <div class="title-right-hiden1 q">
                        <div class="hiden-1">
                            <div></div>
                            <img src="image/title-2.jpg">
                            <p>你好！请<a href="#">登录</a></p>
                        </div>
                        <div class="hiden-2">
                            <p style="border-right: 1px solid #e5e5e5;">
                                <span></span>
                                <a href="#">我的订单</a>
                            </p>
                            <p style="display: inline-block;float: right">
                                <span></span>
                                <a href="#">我的消息</a>
                            </p>
                        </div>
                        <div class="hiden-3">
                            <a href="#">会员俱乐部</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="title-right-hiden2 q">我的优惠券</div>
                </li>
                <li>
                    <div class="title-right-hiden3 q">我收藏的品牌</div>
                </li>
                <li>
                    <div class="title-right-hiden4 q">我收藏的商品</div>
                </li>
            </ul>

            <div class="top">
                <div class="top-1"></div>
                <div class="top-2">购物车</div>
                <div class="top-3">0</div>
            </div>
        </div>
        <div class="title-right-foot">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/jquery.cookie.js"></script>

<script src="js/header.js"></script>
<script src="js/wapper.js"></script>
<script src="js/title-right.js"></script>
<script src="js/foot.js"></script>
<script src="js/json.js"></script>
<script src="js/content-buy.js"></script>
<script src="js/timer.js"></script>
<script>
    var app = angular.module('product',[]);
    app.controller('productController',['$scope','$http',function($scope,$http){
        $http.get('index.json').success(function(res){


        })
    }])
</script>





